<template>
	<div class="bill">
		<h3 class="title">菜品管理</h3>
		<el-button type="warning" style="float: right;" @click="showAddbill=true"><i class="el-icon-plus"></i> 新增菜品</el-button>
		<el-table :data="billList" :default-sort="{prop:'sign',order:'descending'}">
			<el-table-column prop="foodid" label="菜品号" sortable></el-table-column>
			<el-table-column prop="foodname" label="菜名"></el-table-column>
			<el-table-column prop="price" label="单价" sortable></el-table-column>
			<el-table-column prop="type" label="菜品类型"></el-table-column>
			<el-table-column prop="sign" label="是否招牌" sortable>
				<template slot-scope="scope">
					<el-tag v-if="scope.row.sign" type="warning">招牌菜</el-tag>
					<el-tag v-else>普通菜</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" @click="showRevise(scope.row)">修改</el-button>
					<el-button @click="deleteFood(scope.row.foodid,scope.row.foodname)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-dialog title="修改菜品信息" :visible.sync="showR">
			<div class="inp">
				<span class="tit">菜品编号：</span><el-input v-model="revise.foodid" style="width: 85%;" disabled></el-input>
			</div>
			<div class="inp">
				<span class="indent tit">菜名：</span><el-input v-model="revise.foodname" style="width: 85%;" disabled></el-input>
			</div>
			<div class="inp">
				<span class="indent tit">单价：</span><el-input v-model="revise.price" style="width: 85%;" type="number"></el-input>
			</div>
			<div class="inp">
				<span class="tit">菜品类型：</span>
				<el-radio-group v-model="revise.type">
					<el-radio label="烧烤"></el-radio>
					<el-radio label="热菜"></el-radio>
					<el-radio label="凉菜"></el-radio>
					<el-radio label="汤羹"></el-radio>
					<el-radio label="主食"></el-radio>
					<el-radio label="酒水饮料"></el-radio>
				</el-radio-group>
			</div>
			<div class="inp">
				<span class="tit">是否招牌：</span>
				<el-radio-group v-model="revise.sign">
					<el-radio :label="0">普通菜</el-radio>
					<el-radio :label="1">招牌菜</el-radio>
				</el-radio-group>
			</div>
			<template v-slot:footer>
				<el-button @click="showR=false">取消编辑</el-button>
				<el-button type="primary" @click="reviseFood">确认修改</el-button>
			</template>
		</el-dialog>
		
		<el-dialog title="编辑菜品信息" :visible.sync="showAddbill">
			<div class="inp">
				<span class="indent tit">菜名：</span><el-input v-model="addBill.foodname" placeholder="请输入菜品名称" style="width: 85%;"></el-input>
			</div>
			<div class="inp">
				<span class="indent tit">单价：</span><el-input v-model="addBill.price" placeholder="请输入菜品单价" style="width: 85%;" type="number"></el-input>
			</div>
			<div class="inp">
				<span class="tit">菜品类型：</span>
				<el-radio-group v-model="addBill.type">
					<el-radio label="烧烤"></el-radio>
					<el-radio label="热菜"></el-radio>
					<el-radio label="凉菜"></el-radio>
					<el-radio label="汤羹"></el-radio>
					<el-radio label="主食"></el-radio>
					<el-radio label="酒水饮料"></el-radio>
				</el-radio-group>
			</div>
			<div class="inp">
				<span class="tit">是否招牌：</span>
				<el-radio-group v-model="addBill.sign">
					<el-radio :label="0">普通菜</el-radio>
					<el-radio :label="1">招牌菜</el-radio>
				</el-radio-group>
			</div>
			<template v-slot:footer>
				<el-button @click="showAddbill=false">取消编辑</el-button>
				<el-button type="primary" @click="SubmitAddbill">确认添加</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data(){
		return{
			showR:false,
			showAddbill:false,
			addBill:{
				foodname:"",
				price:"",
				type:"",
				sign:""
			},
			billList:[],
			revise:{}
		}
	},
	methods:{
		showRevise(item){
			this.showR=true
			this.revise=item
		},
		reviseFood(){
			this.axios.get(`${this.$url}/reviseFood`,{
				params:{
					foodid:this.revise.foodid,
					foodname:this.revise.foodname,
					price:this.revise.price,
					type:this.revise.type,
					sign:this.revise.sign
				}
			}).then((response)=>{
				if(response.data==="success"){
					this.$message({
						message: '修改菜品信息成功！',
						type: 'success'
					});
					this.showR=false
					this.axios.get(`${this.$url}/foodList`).then((response)=>{
						this.billList=response.data
					})
				}
				else{
					this.$message.error('修改菜品信息失败...');
				}
			})
		},
		deleteFood(foodid,foodname){
			this.$confirm('是否确定删除该菜品所有信息?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.axios.get(`${this.$url}/deleteFood`,{
					params:{
						foodid:foodid,
						foodname:foodname,
					}
				}).then((response)=>{
					if(response.data==="success"){
						this.$message({
							message: '删除菜品信息成功！',
							type: 'success'
						});
						this.axios.get(`${this.$url}/foodList`).then((response)=>{
							this.billList=response.data
						})
					}
					else{
						this.$message.error('删除菜品信息失败...');
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消操作'
				});
			})
		},
		SubmitAddbill(){
			var isOpen=false;
			for(var item of this.billList){
				if(item.foodname===this.addBill.foodname){
					this.$message({
						message: '请勿重复添加已有菜品',
						type: 'warning'
					});
					isOpen=false;
					break
				}
				else{
					isOpen=true;
				}
			}
			if(isOpen){
				if(this.addBill.foodname&&this.addBill.price&&this.addBill.type&&this.addBill.sign!==""){
					this.axios.get(`${this.$url}/addBill`,{
						params:{
							foodname:this.addBill.foodname,
							price:this.addBill.price,
							type:this.addBill.type,
							sign:this.addBill.sign
						}
					}).then((response)=>{
						if(response.data==="success"){
							this.$message({
								message: '添加菜品成功！',
								type: 'success'
							});
							this.showAddbill=false
							this.axios.get(`${this.$url}/foodList`).then((response)=>{
								this.billList=response.data
							})
						}
						else{
							this.$message.error('添加菜品失败...');
						}
					})
				}
				else{
					this.$message('请填写完整菜品信息！');
				}
			}
		}
	},
	mounted(){
		this.axios.get(`${this.$url}/foodList`).then((response)=>{
			this.billList=response.data
		})
	}
}
</script>

<style>
	.tit{
		display: inline-block;
		margin: 0 10px;
	}
	.indent{
		text-indent: 2em;
	}
	.inp{
		margin:10px 0;
		text-align: left;
		height: 40px;
		line-height: 40px;
	}
</style>
